<template>
  <div class="home card">
    <div class="left">
      <el-card>
        <div class="toponebox">
          <UploadImg
            v-model:image-url="routedata.avatar"
            :file-size="3"
            :borderRadius="borderRadius"
            :infodata="infodata"
            @update:imageUrl="updateimageUrl"
          >
            <template #tip>上传头像</template>
          </UploadImg>

          <div class="bjbox">
            <el-button type="primary" class="button" @click="enitbutton">编辑信息</el-button>
          </div>

          <div class="inforbox">
            <div class="inforboxtext">患者姓名：{{ routedata.name }}</div>
            <div class="inforboxtext">手机号码{{ routedata.phoneNumber }}</div>
            <div class="inforboxtext">医保类型:{{ routedata.insuranceTypeRemark }}</div>
            <div class="inforboxtext">身份证号:</div>
            <div>{{ routedata.idCard }}</div>
            <div class="inforboxtext">性别：</div>
            <div class="inforboxtext">主诊医生：</div>
            <div class="inforboxtext">糖尿病分型：</div>
            <div class="inforboxtext">项目分组：</div>
            <div class="inforboxtext">加入管理时间：</div>
            <div class="inforboxtext">是否入组:</div>
            <div class="inforboxtext">预计下一次复诊时间:</div>
            <div>2025-3-12</div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="right">
      <div class="contentbox">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <Baseinfo />
          </el-tab-pane>
          <el-tab-pane label="检查信息" name="second">
            <Jzinfo />
          </el-tab-pane>
          <el-tab-pane label="检验记录" name="third">
            <Hyxx />
          </el-tab-pane>
          <el-tab-pane label="处方信息" name="fourth">
            <Cfxx />
          </el-tab-pane>
          <el-tab-pane label="定期随访" name="five">
            <Dqsf />
          </el-tab-pane>
          <el-tab-pane label="复诊预约" name="six">
            <Fzyy />
          </el-tab-pane>
          <el-tab-pane label="添加问卷" name="seven">
            <Ajwj />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <Addzj ref="addzjComponent" @Addconten="Addconten" :infoID="infoID" />
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import Baseinfo from "@/views/pageAdd/baseinfo.vue";
import Hyxx from "@/views/pageAdd/hyxx.vue";
import Jzinfo from "@/views/pageAdd/jzinfo.vue";
import Cfxx from "@/views/pageAdd/cfxx.vue";
import Addzj from "@/views/home/add.vue";
import Dqsf from "@/views/pageAdd/dqsf.vue";
import Fzyy from "@/views/pageAdd/fzyy.vue";
import Ajwj from "@/views/pageAdd/addwj.vue";
import UploadImg from "@/components/Upload/Img.vue";
import { useRoute } from "vue-router";
import { getYPlist } from "@/api/modules/login";
const route = useRoute();
const routedata = reactive(route.query);
let infoID = ref("12313");
const activeName = ref("first");
const ImageProps = ref(
);
const borderRadius = ref("50%");
let showaddinfro = ref(false);
const handleClick = tab => {
  if (tab.props.name == "third") {
    console.log("检查信息");
    //判断本地存储oypzj是否存在，不存在则请求接口获取数据
    if (!JSON.parse(sessionStorage.getItem("YPlist"))) {
      getYPlist().then(res => {
        console.log(res);
        sessionStorage.setItem("YPlist", JSON.stringify(res.data));
      });
    } 
  }
};
const imageUrl =""
let infodata = ref({});
infodata.value = {
  id: routedata.id
};
function handleAvatarSuccess(res, file) {
  this.imageUrl = URL.createObjectURL(file.raw);
}

function beforeAvatarUpload(file) {
  const isJPG = file.type === "image/jpeg";
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    this.$message.error("上传头像图片只能是 JPG 格式!");
  }
  if (!isLt2M) {
    this.$message.error("上传头像图片大小不能超过 2MB!");
  }
  return isJPG && isLt2M;
}
const addzjComponent = ref(null);
const enitbutton = () => {
  addzjComponent.value.open();
  addzjComponent.value.getAction();
};

const Addconten = val => {
  console.log(val);
};
const closehxbox = () => {
  console.log("关闭");

  showaddinfro.value = false;
};
function updateimageUrl(e) {
  console.log("e------->", e);
}
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  .left {
    width: 200px;

    margin-right: 10px;
    .toponebox {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .bjbox {
        margin-top: 20px;
      }

      .imgbox {
        width: 100px;
        height: 100px;
        /* height: 9%; */
        border-radius: 50%;
      }
      .inforbox {
        margin-top: 30px;
        font-size: 14px;
        .inforboxtext {
          margin: 30px 0;
        }
      }
      .topinfo {
        flex: 1;
        color: #9a9b9d;
        font-size: 15px;
        margin-left: 1%;
        .row-with-margin {
          margin-bottom: 20px;
          /* 设置行间距 */
        }
      }
    }
  }

  .right {
    flex: 1;
    overflow: auto;
    .contentbox {
    }
  }
}
// ::v-deep(.el-card__body) {
//   background: #f7b36b;
// }
</style>
